package me.fung.rem.app.settings

import androidx.compose.foundation.ScrollbarAdapter
import androidx.compose.foundation.VerticalScrollbar
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Clear
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.input.key.Key
import androidx.compose.ui.input.key.key
import androidx.compose.ui.input.key.onKeyEvent
import androidx.compose.ui.unit.dp
import me.fung.keen.app.view.View
import me.fung.rem.app.common.RemTextField
import me.fung.rem.app.common.goBackButton

const val PAGE_TAG_VIEW = "page_tag_view"

class TagView : View<TagPresenter>() {

    @Composable
    override fun content(modifier: Modifier) {
        LaunchedEffect(Unit) {
            p.load()
        }
        Box(modifier = modifier) {
            tagContent(Modifier.align(Alignment.Center))
            goBackButton()
        }
    }

    @Composable
    fun BoxScope.tagContent(modifier: Modifier) {
        val scrollState = rememberScrollState()
        Column(
            modifier = modifier.verticalScroll(scrollState),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {

            tags(modifier = Modifier)
            addButton(modifier = Modifier.align(Alignment.CenterHorizontally))
        }
        VerticalScrollbar(ScrollbarAdapter(scrollState), modifier = Modifier.align(Alignment.CenterEnd))
    }
}

@OptIn(ExperimentalLayoutApi::class, ExperimentalMaterialApi::class)
@Composable
fun TagView.tags(modifier: Modifier) {
    val rp = remember { p }
    FlowRow(
        modifier = modifier,
        horizontalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        rp.tags.forEach {
            FilterChip(
                selected = true,
                onClick = { rp.drop(it) },
                leadingIcon = { Icon(Icons.Default.Clear, null) }
            ) {
                Text(text = it.text)
            }
        }
    }
}

@Composable
fun TagView.addButton(modifier: Modifier) {
    val rp = remember { p }
    val focusRequester = remember { FocusRequester() }
    LaunchedEffect(Unit) {
        focusRequester.requestFocus()
    }
    Row(
        modifier = modifier,
        verticalAlignment = Alignment.CenterVertically
    ) {
        RemTextField(
            value = rp.textNewTag,
            onValueChange = { rp.textNewTag = it },
            modifier = Modifier.focusRequester(focusRequester).onKeyEvent {
                if (it.key == Key.Enter) {
                    rp.add()
                    return@onKeyEvent true
                }
                false
            },
            singleLine = true,
        )
        Button(
            onClick = { rp.add() }
        ) {
            Text("添加标签")
        }
    }
}